<template>
  <div class="perfect-one">
    <div class="per-header">
      <p class="per-remind">
        <i class="el-icon-message-solid"></i>查看补全个人信息后点击完成进入预约流程
      </p>
    </div>
    <div class="per-content">
      <div class="per-tab">
        <span class="title">当前位置：</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>基本信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="per-layer">
        <div class="per-steps">
          <el-steps :active="1" align-center>
            <el-step title="步骤1" description="上传相关证件"></el-step>
            <el-step title="步骤2" description="审核补全个人信息"></el-step>
          </el-steps>
        </div>
        <div class="per-input">
          <div class="content-detail">
            <el-form
              ref="message"
              :model="message"
              class="demo-form-inline"
              label-width="165px"
              :rules="rules"
            >
              <el-form-item :label="fields.name" prop="name">
                <el-input v-model="message.name" :placeholder="fields.nameplaceholder"></el-input>
              </el-form-item>
              <el-form-item :label="fields.idnumber" prop="idnumber">
                <el-input v-model="message.idnumber" :placeholder="fields.idnumberplaceholder"></el-input>
              </el-form-item>
              <el-form-item label="邮政编码：" prop="postal">
                <el-input v-model="message.postal" placeholder="请输入邮政编码"></el-input>
              </el-form-item>
              <el-form-item label="地址：" prop="site">
                <el-input v-model="message.site" placeholder="请输入您的地址"></el-input>
              </el-form-item>
              <el-form-item label="密保问题：" prop="question">
                <el-select class="question" v-model="message.question" placeholder="请选择您的密保问题">
                  <el-option label="你父亲的名字是什么" value="你父亲的名字是什么"></el-option>
                  <el-option label="你母亲的名字是什么" value="你母亲的名字是什么"></el-option>
                  <el-option label="你小学班主任是谁" value="你小学班主任是谁"></el-option>
                  <el-option label="对你的人生影响最大的人是谁" value="对你的人生影响最大的人是谁"></el-option>
                  <el-option label="你的座右铭是什么" value="你的座右铭是什么"></el-option>
                  <el-option label="你最喜欢的食物是什么" value="你最喜欢的食物是什么"></el-option>
                  <el-option label="你最喜欢的动物是什么" value="你最喜欢的动物是什么"></el-option>
                  <el-option label="你出生的城市" value="你出生的城市"></el-option>
                  <el-option label="你的爱好" value="你的爱好"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="密保答案：" prop="answer">
                <el-input v-model="message.answer" placeholder="请输入您的密保答案"></el-input>
              </el-form-item>
              <el-form-item class="item-button">
                <el-button type="info" @click="back">上一步</el-button>
                <el-button type="primary" :loading="awaiting" @click="submitForm('message')">完成</el-button>
              </el-form-item>
            </el-form>
            <div class="img-box">
              <img :src="imgAddr" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    //邮政编码正则
    var checkmailnum = (rule, value, callback) => {
      var mailregex = /^[1-9][\d]{5}$/;
      if (mailregex.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的邮政编码"));
    };
    return {
      imgAddr:"",
      //表单数据
      message: {
        name: "",
        idnumber: "",
        postal: "",
        site: "",
        question: "",
        answer: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入您的姓名，示例：张三",
            trigger: "blur",
          },
        ],
        idnumber: [
          { required: true, message: "请输入您的身份证号码", trigger: "blur" },
          { validator: null, trigger: "blur" },
        ],
        postal: [
          {
            required: true,
            message: "请输入邮政编码，示例：610000",
            trigger: "blur",
          },
          {
            validator: checkmailnum,
            trigger: "blur",
          },
        ],
        site: [
          {
            required: true,
            message: "请输入您的所在地， 示例：**省**市**区**街**号",
            trigger: "blur",
          },
        ],
        question: [
          {
            required: true,
            message: "请设置您的密保问题，方便找回您的账号",
            trigger: "change",
          },
        ],
        answer: [
          {
            required: true,
            message: "请设置上述密保问题的答案",
            trigger: "blur",
          },
        ],
      },
      //动态渲染身份证和营业执照字段,默认身份证
      fields: {
        name: "姓名：",
        nameplaceholder: "请输入您的姓名",
        idnumber: "证件号码：",
        idnumberplaceholder: "请输入您的身份证号码",
      },
      awaiting: false,
    };
  },
  methods: {
    ...mapMutations(["changeAllBusState", "setFinishStatus"]),
    back(){
      this.$router.push("/business/myBusiness/perfectOne");
    },
    //提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.awaiting = true;
          // alert("submit!");
          // this.$router.push('/business/allBusiness/setPasswor')
          if (this.$route.query.value == "营业执照") {
            this.$http
              .get("/trademark/proMember/addinfo", {
                params: {
                  id: this.$store.state.userId,
                  enterprise: this.message.name,
                  address: this.message.site,
                  postCode: this.message.postal,
                  username: this.message.user,
                  pwdQue: this.message.question,
                  pwdAns: this.message.answer,
                },
              })
              .then((res) => {
                this.awaiting = false;
                if (res.data.code !== 200)return;
                this.setFinishStatus(1);
                this.changeAllBusState(this.$store.getters.basicInfo);
                this.$router.push({
                  path: "/business/allBusiness/information",
                });
              })
              .catch((error) => {
                this.awaiting = false;
              });
          } else {
            this.$http
              .get("/trademark/proMember/addinfo", {
                params: {
                  id: this.$store.state.userId,
                  applicantName: this.message.name,
                  address: this.message.site,
                  postCode: this.message.postal,
                  username: this.message.user,
                  pwdQue: this.message.question,
                  pwdAns: this.message.answer,
                },
              })
              .then((res) => {
                if (res.data.code !== 200)
                  return;
                this.setFinishStatus(1);
                this.changeAllBusState(this.$store.getters.basicInfo);
                this.$router.push({
                  path: "/business/allBusiness/information",
                });
              })
              .catch((error) => {
                this.awaiting = false;
              });
          }
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    //console.dir(this.$route.query);
    //身份证正则
    var checkidlnum = (rule, value, callback) => {
      var idlnum = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
      if (idlnum.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的身份证"));
    };
    //营业执照号正则
    var checkidlnumtwo = (rule, value, callback) => {
      var idlnumtwo = /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/;
      if (idlnumtwo.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的营业执照"));
    };
    //判断是身份证还是营业执照
    let accountInfo = JSON.parse(this.$route.query.accountInfo);
    if (accountInfo.value == "营业执照") {
      this.fields.name = "公司名称：";
      this.fields.nameplaceholder = "请输入公司名称";
      this.fields.idnumber = "证件编号：";
      this.fields.idnumberplaceholder = "请输入营业执照编号";
      this.rules.name[0].message = "请填写你的公司名称，如：成都XX科技有限公司";
      this.rules.idnumber[0].message = "请填写你的营业执照";
      this.rules.idnumber[1].validator = checkidlnumtwo;
      this.message.name = accountInfo.imgintro.pa[0].name;
      this.message.idnumber = accountInfo.imgintro.pa[0].identCode;
      this.message.site = accountInfo.imgintro.pa[0].address;
      this.imgAddr = this.mconfig.host + this.$route.query.imgAddr;
      console.log(this.imgAddr);
    } else {
      this.rules.idnumber[1].validator = checkidlnum;
      this.message.name = accountInfo.imgintro.pic[0].name;
      this.message.idnumber = accountInfo.imgintro.pic[0].idnumber;
      this.message.site = accountInfo.imgintro.pic[0].address;
      this.imgAddr = this.mconfig.host + this.$route.query.imgAddr;
      console.log(this.imgAddr);
    }
  },
};
</script>

<style lang="less" scoped>
.perfect-one {
  background-color: #f7f7f7;
  .per-header {
    width: 100%;
    height: 50px;
    color: #ff6633;
    background-color: #ffefea;
    line-height: 50px;
    border-radius: 8px;
    margin-bottom: 22px;
    .el-icon-message-solid {
      font-size: 20px;
      padding: 0 5px 0 20px;
    }
  }
  .per-content {
    background-color: #fff;
    .title{
      font-size: 14px;
    }
    .per-tab {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #666666;
      padding: 28px 0 28px 20px;
      border-bottom: 1px solid #eee;
      /deep/.el-icon-arrow-right,
      /deep/.el-breadcrumb__inner {
        font-size: 14px;
        line-height: normal;
      }
    }
    .per-layer {
      width: 600px;
      margin: 39px 0 0 310px;
      padding-bottom: 20px;
      .per-input {
        width: 900px;
        /deep/.el-form-item{
          width: 500px;
        }
        .content-detail{
          display: flex;
          justify-content: space-between;
        }
        .img-box{
          width: 300px;
          height: 350px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .per-steps {
        width: 1000px;
        margin-bottom: 40px;
      }
      .question {
        width: 100%;
      }
      .item-button {
        width: 100%;
        margin-top: 60px;
        text-align: center;
      }
    }
    .el-steps {
    width: 100%;
    height: 100px;
    /deep/ .el-step.is-horizontal{
      .is-process{
        border-color: #f96900;
        color: #f96900;
      }
      .is-finish {
        border-color: #333;
        color: #333;
        .el-step__line{
          border-bottom: 1px dashed #333;
          /deep/.el-step__line-inner{
            border-top: 1px dashed #333;
            height: 1px;
            border-bottom: none;
          }
        }
      }
      .el-step__line{
        height: 1px;
        border-bottom: 1px dashed #d9d9d9;
        background: transparent;
        /deep/.el-step__line-inner{
          background: transparent;
          border-style: dashed;
          height: 1px;
          border-bottom: none;
        }
      }
      .el-step__icon.is-text{
        border:1px solid;
        .el-step__icon-inner{
          font-weight: normal;
        }
      }
    }
  }
  }
}
</style>
